<div class="row">
    <div class="col">
        <div class="card">
            <h4 class="card-title px-3 pt-3">订单详情列表</h4>
            <h6 class="card-subtitle px-3">订单详情信息</h6>
            <div class="card-body">
                <div id="order_detail-list">
                    <table class="table basic-elaboration-tablet-search table-hover table-striped color-table info-table">
                        <thead>
                        <tr>
                            <th>详情编号</th>
                            <th>订单编号</th>
                            <th>商品编号</th>
                            <th>商品数量</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="item in order_details">
                            <td>{{item.od_id}}</td>
                            <td>{{item.o_id}}</td>
                            <td>{{item.p_id}}</td>
                            <td>{{item.od_count}}</td>
                            <td>
                                <a class="btn btn-success" href="#">查看</a>
                                <a class="btn btn-primary" href="#">编辑</a>
                                <a class="btn btn-danger" href="#">删除</a>
                            </td>

                        </tr>

                        </tbody>
                    </table>
                </div>
            </div>

        </div>

    </div>
</div>
<script>
    $(function () {
        $.getJSON("http://localhost:8080/order_detail", function (dto) {
            new Vue({
                el: "#order_detail-list",
                data: {
                    order_details: dto.data
                }
            })
        });
    })
</script>